        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script src="vue.js"></script>
            <script src="index.js"></script>
            <link rel="stylesheet" href="index.css">
        </head>


        </head>
        <body>
        <div id="app">
            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                <span>
                    form  表单
                </span>
                <span slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog">取 消</el-button>
                <el-button type="primary" @click="confirmDialog">确 定</el-button>
  </span>
            </el-dialog>


        </div>
        <script>
            var  vue=new Vue({
                el:"#app",
                data:{
                    dialogVisible:true,
                    formData:{}
                },
                methods:{
                    cancelDialog(){



                    },

                    confirmDialog(){
                        //  表单数据校验   合法  之后 提交 表单数据   ajax  ....  this.formData
                        this.dialogVisible=false;

                    }
                }
            })
        </script>

        </body>
        </html>